<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    img{
        width: 192px;
        height: 108px;
    }
    li {
        list-style: none;
        float: left;
    }
    body {
        background: url(images/2.png) no-repeat center top;
    }
    ul{
        width: 786px;
        margin: 0 auto;
        margin-top: 40px;
    }
</style>

<body>
    <!-- 点击图中的4个小图片任意一个，即可以修改切换背景图片给你选中的。 -->
    <ul>
        <li><img src="images/1.png" alt=""></li>
        <li><img src="images/2.png" alt=""></li>
        <li><img src="images/3.png" alt=""></li>
        <li><img src="images/4.png" alt=""></li>
    </ul>
    <script>
        var img = document.querySelector('ul').querySelectorAll('img');
        for (var i = 0; i < img.length; i++){
            img[i].onclick = function(){
                document.body.style.background = 'url('+ this.src + ')';
            }
        }
    </script>
</body>

</html>